<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/index4.css">
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="Tronke.MyCookie.js"></script>
    <script>
        $(function(){
            var valstr=getCookieByKey('message');
            if(valstr!=null){
                $('input:eq(2)').val(JSON.parse(decodeURIComponent(valstr)).username);
                $('input:eq(3)').val(JSON.parse(decodeURIComponent(valstr)).password);
            }
            var n = 2;
            var flag = true;
            $('#cookie').on('click', function(){
                if(n % 2 == 0){
                    $(this).css('backgroundColor', 'red');
                } else {
                    $(this).css('backgroundColor', '#fff')
                }
                n++;
            });
            var num = parseInt(Math.random() * 10000);
            var a = parseInt(num / 1000);
            var b = parseInt(num / 100 % 10);
            var c = parseInt(num / 10 % 10);
            var d = num % 10;
            var str6 = a + '' + b + '' + c + '' + d + '';
            $('#yzm').html(str6);
            $('#yzm').click(function(){
                num = parseInt(Math.random() * 10000);
                var a = parseInt(num / 1000);
                var b = parseInt(num / 100 % 10);
                var c = parseInt(num / 10 % 10);
                var d = num % 10;
                str6 = a + '' + b + '' + c + '' + d + '';
                $('#yzm').html(str6);
            });
            $('#enter').on('click', function(){
                var str1 = $('input:eq(2)').val();
                var str2 = $('input:eq(3)').val();
                $.ajax({
                    url : "http://localhost/phpday01/server/login.php",
                    type : "post",
                    data : "loginName=" + str1 + "&loginPwd=" + str2 + "",
                    success : function(res){
                        if(JSON.parse(res.split(")")[1]).status == 1){
                            alert("登录成功");
                        } else {
                            flag = false;
                            alert("用户名或密码错误")
                        }
                        if($('#yanzheng').val() != str6){
                            flag = false;
                            alert("验证码错误")
                        }
                        if($('#yanzheng').val() == null){
                            flag = false;
                            alert("验证码不能为空")
                        }
                        if(flag == true){
                            window.location.href = "index.html"
                        }
                    }
                });
                if(n % 2 != 0){
                    var obj={};
                    obj.username=str1;
                    obj.password=str2;
                    setCookie('message',JSON.stringify(obj),7);
                }else{
                    setCookie('message',JSON.stringify(obj),-7);
                }
//                console.log(JSON.parse(decodeURIComponent(valstr)));
            })
        })
    </script>
</head>
<body>
<header id="header-wrapper">
    <div class="header">
        <div class="header-left">
            <a href="#">关于我们</a>
            <a href="#">商业客户</a>
            <a href="#">练习客服</a>
        </div>
        <div class="header-right">
            <span>您好,请</span>
            <a href="#">注册</a>
            <a href="#">登录</a>
            <a href="#">QQ登录</a>
            <a href="#">微博登录</a>
        </div>
    </div>
</header>
<section id="Engine-wrapper">
    <div class="Engine">
        <div class="Engine-left"></div>
        <div class="Engine-middle">
            <div class="search">
                <i class="iconfont">&#xe603;</i> <input type="text" class="txt" placeholder="搜海淘团购,全球比价和海淘圈经验分享"/>
                <input type="submit" class="sub" value="搜索"/>
            </div>
            <div class="items">
                <a href="#">Coach</a>
                <a href="#">鱼油</a>
                <a href="#">热门海淘</a>
                <a href="#">新品</a>
                <a href="#">品牌汇</a>
                <a href="#">团购精选</a>
                <a href="#">全球包邮</a>
            </div>
        </div>
        <div class="Engine-right">
            <div class="shopping">
                <a href="#">
                    <i class="iconfont">&#xe60a;</i> <span>购物车</span> <b>0</b>
                </a>
            </div>
            <div class="shoucang">
                <a href="#"><i class="iconfont">&#xe621;</i> <span>收藏</span></a>
            </div>
        </div>
    </div>
</section>
<section id="nav-wrapper">
    <div class="nav">
        <ul class="left">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">海淘圈</a>
            </li>
            <li>
                <a href="#">海淘团购</a>
            </li>
            <li>
                <a href="#">好物比价</a>
            </li>
            <li>
                <a href="#">全球运转</a>
            </li>
            <li>
                <a href="#">全球名站</a>
            </li>
            <li>
                <a href="#">嚎啕达人</a>
            </li>
        </ul>
        <ul class="right">
            <li>
                <a href="#">海淘盒子</a>
            </li>
            <li>
                <a href="#">海淘APP</a>
            </li>
        </ul>
    </div>
</section>
<section id="login">
    <div class="inner">
        <img src="images/penguin_06.png"/>
        <div class="content">
            <p>简单注册</p>
            <div class="formarea">
                账号:<input type="text" placeholder="用户名" name="loginName" id="lg"/><br/> 密码:<input type="password" placeholder="密码" name="loginPwd" id="pd"/><br/>
                <input type="text" placeholder="验证码" id="yanzheng"/>
                <span class="yzm" id="yzm" style="cursor:pointer"></span><br/>
                <span class="cookie" id="cookie" style="cursor:pointer"></span>
                <div>记住我</div>
                <br/> <input type="button" value="登录" style="cursor:pointer" id="enter"/><br/>
                <div class="share">
                    <a href="#" class="qq"></a>
                    <a href="#" class="weibo"></a>
                </div>
                <div class="solve">
                    <a href="#" id="login1">立即登录</a>
                    <a href="#">忘记密码</a>
                </div>
                <p id="warn"></p>
            </div>
        </div>
    </div>
</section>
<footer id="footer-wrapper">
    <div class="footer">
        <div class="mya">
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">战略合作</a>
            <a href="#">团购供应商</a>
            <a href="#">商家入驻</a>
            <a href="#">友情链接</a>
            <a href="#">商务合作</a>
            <a href="#">加入我们</a>
        </div>
        <p>客服热线 <span>400-850-0020</span> ©2017 海淘网 沪ICP备14025008号</p>
        <div class="police">
            <a href="#"></a>
            <img src="images/gongshangicon.gif" alt="">
            <p>网安备31011502002285</p>
        </div>
    </div>
</footer>
</body>
</html>